<template>
  <view class="step-box">
    <block v-for="index of 3" :key="index">
      <image v-if="step === index" class="icon-star" src="/static/common/image/star1.png" mode="widthFix"></image>
      <image v-else-if="step < index" class="icon-star" src="/static/common/image/star2.png" mode="widthFix"></image>
      <image v-else class="icon-done" src="/static/common/image/right_icon.png" mode="widthFix"></image>
      <image v-if="index !== 2" class="icon-shenglue" src="/static/common/image/shenglue_icon.png" mode="widthFix"></image>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    step: Number
  },
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss">
  .step-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-star {
      width: 30rpx;
      height: 30rpx;
    }
    .icon-done {
      width: 30rpx;
      height: 30rpx;
    }
    .icon-shenglue {
      width: 100rpx;
      margin: 0 20rpx;
    }
  }
</style>